<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品页面</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<style>
    /* 控制图片路径显示样式 */
    #goodsTable td.url {
        max-width: 100px; /* 控制路径最大宽度 */
        overflow: hidden; /* 超出部分隐藏 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 超出显示省略号 */
    }

    /* 控制除图片字段外其他字段的固定宽度 */
    #goodsTable th:not(:nth-child(4)) { /* 排除第4个th元素（图片字段） */
        width: 170px; /* 设置其他字段的宽度 */
    }
    .update-btn {
        background-color: #1E9FFF; /* 浅蓝色 */
        color: #fff; /* 文字颜色 */
    }

</style>
<body>

<!--&lt;!&ndash; 搜索框 &ndash;&gt;-->
<!--<div class="layui-inline">-->
<!--    <input type="text" id="searchInput" class="layui-input" placeholder="请输入商品编号">-->
<!--</div>-->
<!--<div class="layui-inline">-->
<!--    <button class="layui-btn" id="searchBtn">搜索</button>-->
<!--</div>-->

<!-- 增加商品按钮 -->
<div class="layui-inline">
    <button class="layui-btn" id="addProductBtn">增加商品</button>
</div>

<table class="layui-table" id="goodsTable">
    <thead>
    <tr>
        <th lay-data="{field:'gid', width:80}">商品编号</th>
        <th lay-data="{field:'url', width:100}">图片</th> <!-- 设置图片字段宽度为 100px -->
        <th lay-data="{field:'price'}">价格</th>
        <th lay-data="{field:'title'}">标题</th>
        <th lay-data="{field:'shop'}">商铺</th>
        <th lay-data="{field:'type'}">商品类型</th>
        <th>操作</th> <!-- 添加操作列 -->
    </tr>
    </thead>
    <tbody></tbody>
</table>

<!-- 增加商品模态框 -->
<div id="addProductModal" style="display: none;">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">图片：</label>
            <div class="layui-input-block">
                <input type="text" id="url" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格：</label>
            <div class="layui-input-block">
                <input type="text" id="price" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input type="text" id="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商铺：</label>
            <div class="layui-input-block">
                <input type="text" id="shop" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品类型：</label>
            <div class="layui-input-block">
                <input type="text" id="type" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="addConfirmBtn">确定</button>
                <button class="layui-btn layui-btn-primary" id="addCancelBtn">取消</button>
            </div>
        </div>
    </div>
</div>

<!--修改商品信息模态框-->
<div id="updateProductModal" style="display: none;">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">图片：</label>
            <div class="layui-input-block">
                <input type="text" id="updateUrl" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格：</label>
            <div class="layui-input-block">
                <input type="text" id="updatePrice" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input type="text" id="updateTitle" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商铺：</label>
            <div class="layui-input-block">
                <input type="text" id="updateShop" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品类型：</label>
            <div class="layui-input-block">
                <input type="text" id="updateType" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="updateConfirmBtn">确定</button>
                <button class="layui-btn layui-btn-primary" id="updateCancelBtn">取消</button>
            </div>
        </div>
    </div>
</div>

<div id="manual-pagination" class="layui-box"></div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        // 分页器相关变量
        var currentPage = 1;
        var pageSize = 12;

        // 加载数据函数
        function loadData(page, size) {
            $.get('/main/goods/search/' + page + '/' + size, function (res) {
                renderTable(res.data.list); // 修改这里
                renderPagination(res.data.total); // 修改这里
            });
        }

        // 渲染表格函数
        function renderTable(data) {
            var html = '';
            $.each(data, function (index, item) {
                html += '<tr>';
                html += '<td>' + item.gid + '</td>';
                html += '<td class="url" title="' + item.url + '">' + item.url + '</td>'; <!-- 使用 title 属性来显示完整路径 -->
                html += '<td>' + item.price + '</td>';
                html += '<td>' + item.title + '</td>';
                html += '<td>' + item.shop + '</td>';
                html += '<td>' + item.type + '</td>';
                // 添加操作列
                html += '<td><button class="layui-btn layui-btn-sm return-btn" data-gid="' + item.gid + '">退货</button> <button class="layui-btn layui-btn-danger layui-btn-sm delete-btn" data-gid="' + item.gid + '">删除</button> <button class="layui-btn layui-btn-sm update-btn" data-gid="' + item.gid + '">修改</button></td>';
                html += '</tr>';
            });
            $('#goodsTable tbody').html(html);
        }

        // 渲染分页器函数
        function renderPagination(totalCount) {
            var totalPages = Math.ceil(totalCount / pageSize);
            var paginationHtml = '<div class="layui-box layui-laypage layui-laypage-default">'; // 添加 layui-laypage 样式类
            paginationHtml += '<a href="#" class="page-link prev" data-page="' + (currentPage - 1) + '">上一页</a>'; // 上一页按钮

            // 显示的页码数量
            var visiblePages = 5;

            // 当总页数小于等于可见页码数量时，直接显示所有页码
            if (totalPages <= visiblePages) {
                for (var i = 1; i <= totalPages; i++) {
                    paginationHtml += '<a href="#" class="page-link ' + (i === currentPage ? 'active' : '') + '" data-page="' + i + '">' + i + '</a>';
                }
            } else {
                // 当前页码前面的页码数量
                var beforeCurrent = Math.ceil(visiblePages / 2) - 1;
                // 当前页码后面的页码数量
                var afterCurrent = Math.floor(visiblePages / 2);

                // 显示第一页
                if (currentPage > 1) {
                    paginationHtml += '<a href="#" class="page-link" data-page="' + 1 + '">1</a>';
                }

                // 如果当前页码大于等于（可见页码数量-1）/2 + 2，则显示省略号
                if (currentPage >= (visiblePages - 1) / 2 + 2) {
                    paginationHtml += '<span class="ellipsis">...</span>';
                }

                // 显示当前页码前面的页码
                for (var i = currentPage - beforeCurrent; i < currentPage; i++) {
                    if (i > 1) {
                        paginationHtml += '<a href="#" class="page-link" data-page="' + i + '">' + i + '</a>';
                    }
                }

                // 显示当前页码
                paginationHtml += '<a href="#" class="page-link active" data-page="' + currentPage + '">' + currentPage + '</a>';

                // 显示当前页码后面的页码
                for (var i = currentPage + 1; i <= currentPage + afterCurrent; i++) {
                    if (i < totalPages) {
                        paginationHtml += '<a href="#" class="page-link" data-page="' + i + '">' + i + '</a>';
                    }
                }

                // 如果当前页码小于等于总页数减去（可见页码数量-1）/2 - 1，则显示省略号
                if (currentPage <= totalPages - (visiblePages - 1) / 2 - 1) {
                    paginationHtml += '<span class="ellipsis">...</span>';
                }

                // 显示最后一页
                if (currentPage < totalPages) {
                    paginationHtml += '<a href="#" class="page-link" data-page="' + totalPages + '">' + totalPages + '</a>';
                }
            }

            paginationHtml += '<a href="#" class="page-link next" data-page="' + (currentPage + 1) + '">下一页</a>'; // 下一页按钮
            paginationHtml += '</div>';
            $('#manual-pagination').html(paginationHtml);

            // 绑定分页器的点击事件
            $('.page-link').on('click', function (e) {
                e.preventDefault();
                var page = parseInt($(this).data('page'));
                if (page >= 1 && page <= totalPages) {
                    currentPage = page;
                    loadData(currentPage, pageSize);
                }
            });

            // 禁用上一页和下一页按钮的点击事件
            if (currentPage === 1) {
                $('.prev').addClass('layui-disabled').removeAttr('href');
            } else {
                $('.prev').removeClass('layui-disabled').attr('href', '#');
            }

            if (currentPage === totalPages) {
                $('.next').addClass('layui-disabled').removeAttr('href');
            } else {
                $('.next').removeClass('layui-disabled').attr('href', '#');
            }

            // 绑定退货按钮点击事件
            $('.return-btn').on('click', function () {
                var gid = $(this).data('gid');
                $.ajax({
                    url: '/main/goods/delete/' + gid,
                    type: 'DELETE',
                    success: function (response) {
                        // 删除成功后的处理逻辑
                        layer.msg('商品退货成功');
                        // 重新加载数据，刷新页面或其他操作
                        loadData(currentPage, pageSize);
                    },
                    error: function (xhr, status, error) {
                        // 删除失败时的处理逻辑
                        layer.msg('商品退货失败:' + error);
                        // 可以添加相应的提示或重试机制
                    }
                });
            });

            // 绑定删除按钮点击事件
            $('.delete-btn').on('click', function () {
                var gid = $(this).data('gid');
                // 发送 HTTP DELETE 请求到后端删除商品
                $.ajax({
                    url: '/main/goods/delete/' + gid,
                    type: 'DELETE',
                    success: function (response) {
                        // 删除成功后的处理逻辑
                        layer.msg('商品删除成功');
                        // 重新加载数据，刷新页面或其他操作
                        loadData(currentPage, pageSize);
                    },
                    error: function (xhr, status, error) {
                        // 删除失败时的处理逻辑
                        layer.msg('商品删除失败:' + error);
                        // 可以添加相应的提示或重试机制
                    }
                });
            });

            // 绑定修改按钮点击事件
            $('.update-btn').on('click', function () {
                var gid = $(this).data('gid');
                // 根据商品编号获取商品信息
                $.get('/main/goods/search/' + gid, function (res) {
                    // 将获取到的商品信息填充到模态框中
                    $('#updateUrl').val(res.data.url);
                    $('#updatePrice').val(res.data.price);
                    $('#updateTitle').val(res.data.title);
                    $('#updateShop').val(res.data.shop);
                    $('#updateType').val(res.data.type);

                    // 打开修改商品信息的模态框
                    layer.open({
                        type: 1,
                        title: '修改商品信息',
                        content: $('#updateProductModal'),
                        area: ['500px', '350px'],
                        offset: 'auto', // 让模态框自动居中显示
                        cancel: function () {
                            // 关闭模态框
                            $('#updateProductModal').hide();
                            $('#updateProductModal').css({
                                'top': '-1000px',
                                'left': '-1000px',
                                'display': 'none'
                            });
                        }
                    });

                    // 点击确认修改按钮
                    $('#updateConfirmBtn').on('click', function () {
                        // 获取修改后的商品信息
                        var url = $('#updateUrl').val();
                        var price = $('#updatePrice').val();
                        var title = $('#updateTitle').val();
                        var shop = $('#updateShop').val();
                        var type = $('#updateType').val();

                        // 发送修改请求到服务器
                        $.ajax({
                            url: '/main/goods/' + gid,
                            type: 'PUT',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                url: url,
                                price: price,
                                title: title,
                                shop: shop,
                                type: type
                            }),
                            success: function (response) {
                                layer.msg('商品信息修改成功');
                                // 关闭模态框
                                $('#updateProductModal').hide();
                                $('#updateProductModal').css({
                                    'top': '-1000px',
                                    'left': '-1000px',
                                    'display': 'none'
                                });
                                // 重新加载数据
                                loadData(currentPage, pageSize);
                            },
                            error: function (xhr, status, error) {
                                console.error('商品信息修改失败:', error);
                            }
                        });
                        layer.closeAll('page');
                    });

                    // 点击取消按钮
                    $('#updateCancelBtn').on('click', function () {
                        // 关闭模态框
                        $('#updateProductModal').hide();
                        $('#updateProductModal').css({
                            'top': '-1000px',
                            'left': '-1000px',
                            'display': 'none'
                        });
                        layer.closeAll('page');
                    });
                });
            });

        }

        // 点击“增加商品”按钮显示模态框
        $('#addProductBtn').on('click', function () {
            layer.open({
                type: 1,
                title: '新增商品',
                content: $('#addProductModal'),
                area: ['500px', '350px'],
                offset: 'auto', // 让模态框自动居中显示
                cancel: function () {
                    $('#addProductModal').hide(); // 隐藏模态框
                    $('#addProductModal').css({ // 将模态框放置到屏幕之外，隐藏起来
                        'top': '-1000px',
                        'left': '-1000px',
                        'display': 'none'
                    });
                }
            });
        });

        // 点击模态框中的确定按钮添加新商品
        $('#addConfirmBtn').on('click', function () {
            var url = $('#url').val();
            var price = $('#price').val();
            var title = $('#title').val();
            var shop = $('#shop').val();
            var type = $('#type').val();

            $.ajax({
                url: '/main/goods/add',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    url: url,
                    price: price,
                    title: title,
                    shop: shop,
                    type: type
                }),
                success: function (response) {
                    layer.msg('新增商品成功');
                    // 关闭模态框
                    $('#addProductModal').hide(); // 隐藏模态框
                    // 将模态框放置到屏幕之外，隐藏起来
                    $('#addProductModal').css({
                        'top': '-1000px',
                        'left': '-1000px',
                        'display': 'none'
                    });
                    // 重新加载数据
                    loadData(currentPage, pageSize);
                },
                error: function (xhr, status, error) {
                    console.error('新增商品失败:', error);
                }
            });
            layer.closeAll('page');
        });

        // 点击模态框中的取消按钮关闭模态框
        $('#addCancelBtn').on('click', function () {
            $('#addProductModal').hide(); // 隐藏模态框
            $('#addProductModal').css({ // 将模态框放置到屏幕之外，隐藏起来
                'top': '-1000px',
                'left': '-1000px',
                'display': 'none'
            });
            layer.closeAll('page');
        });

        // 页面加载时加载第一页数据
        loadData(currentPage, pageSize);
    });
</script>

</body>
</html>
